<template>
  <div class="zh-application-registration">
    <nav-header>
      <template slot="menuBefore">
        <div class="th-title-icon">
          <el-button
            @click="fieldsTips = true"
            icon="el-icon-warning"
            circle
            title="提示"
            size="mini"
          >
          </el-button>
        </div>
      </template>
    </nav-header>
    <div class="zh-table">
      <div class="zh-table-open clear">
        <div class="zh-open-left fl">
          <div class="open-width" style="width: 120px">
            <el-select
              v-model="applyParam.roleid"
              filterable
              placeholder="请选择角色"
            >
              <el-option
                v-for="item in roleData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="open-width" style="width: 120px">
            <el-select v-model="status" filterable placeholder="请选择类型">
              <el-option
                v-for="item in statusOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="open-width">
            <el-input
              v-model="keyword"
              placeholder="登录账号、姓名搜索"
              @keyup.enter.native="searchFunc"
            ></el-input>
          </div>
          <el-button type="primary" @click="searchFunc">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
        <div class="zh-open-right fr">
          <el-button type="primary" @click="isSetting = true"
            >通知开关设置</el-button
          >
          <el-button
            type="warning"
            v-if="isShowButton < 2"
            @click="changeMuiltApply_confirm(3)"
            >批量拒绝</el-button
          >
          <el-button
            type="primary"
            v-if="isShowButton < 2"
            @click="changeMuiltApply_confirm(2)"
            >批量通过</el-button
          >
          <!-- <el-button type="danger" v-if="isShowButton > 1" @click="deleteAllApply">批量删除</el-button> -->
          <!-- =================================================================================================================================== -->
          <el-button
            type="danger"
            v-if="isShowButton < 2"
            @click="deleteAllApply"
            >批量删除</el-button
          >
          <!-- =================================================================================================================================== -->
        </div>
        <!-- <div class="zh-open-right fr" v-if="user_multistage === false">
					<el-button type="primary" @click="changeMuiltApply_confirm(2)">批量通过</el-button>					
                    <el-button type="danger" @click="changeMuiltApply_confirm(3)">批量拒绝</el-button>
				</div> -->
      </div>
      <div
        class="zh-table-contents"
        v-loading="loading.status"
        :element-loading-text="loading.txt"
      >
        <el-table
          :data="applyData"
          @selection-change="tableSelectionChange"
          border
          max-height="600"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="50"
            :selectable="checkSelectable"
            align="center"
            fixed
          >
          </el-table-column>
          <el-table-column
            prop="number"
            label="帐号"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="用户名"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="part"
            label="角色"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <!-- <el-table-column
				      prop="apply_ip"
				      label="申请IP"
				      v-if="user_multistage === false"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column> -->
          <el-table-column
            prop="create_time"
            label="申请时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <!-- <el-table-column
				      prop="email"
				      label="邮箱"
				      v-if="user_multistage === false"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column> -->
          <el-table-column
            prop=""
            label="操作"
            align="center"
            width="200"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <template>
                <el-button @click="rowDetail(scope.row)" type="text"
                  >详情</el-button
                >
                <el-button
                  v-if="parseInt(scope.row.status) === 1"
                  @click="changeApply_confirm(scope.row, 2)"
                  type="text"
                  >通过</el-button
                >
                <el-button
                  v-if="parseInt(scope.row.status) === 1"
                  @click="changeApply_confirm(scope.row, 3)"
                  type="text"
                  class="delete-button"
                  >拒绝</el-button
                >
                <el-button v-if="parseInt(scope.row.status) === 2" type="text"
                  >已通过</el-button
                >
                <el-button
                  v-if="parseInt(scope.row.status) === 3"
                  type="text"
                  class="delete-button"
                  >已拒绝</el-button
                >
                <el-button
                  v-if="parseInt(scope.row.status) !== 1"
                  type="text"
                  class="delete-button"
                  @click="deleteOne(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-pagination" v-show="total_number > 10">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="applyParam.page_index"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="applyParam.page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total_number"
          >
          </el-pagination>
          <div class="pagination-button">
            <el-button
              @click="getList"
              type="primary"
              icon="el-icon-refresh"
              circle
              title="刷新数据"
              size="mini"
            >
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="fieldsTips"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="30%"
    >
      <ul>
        <li style="list-style-type: disc">
          在审核前请尽可能对详细审查申请信息
        </li>
        <li style="list-style-type: disc">
          对用户审核通过后可对用户信息进行二次编辑（除帐号）
        </li>
        <li style="list-style-type: disc">
          如审核异常需可通过用户留下的联系信息进行及时联系
        </li>
        <li style="list-style-type: disc">
          批量通过后请及时去【平台用户管理】完善用户信息
        </li>
      </ul>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="通知开关设置"
      :before-close="cancelSwitch"
      :visible.sync="isSetting"
      width="450px"
    >
      <el-form ref="settingForm" :model="settingForm" label-width="120px">
        <el-form-item label="审核结果通知：">
          <el-radio-group v-model="settingForm.notice">
            <el-radio label="1">开</el-radio>
            <el-radio label="0">关</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="padding-left: 10px; color: #999999">
        <i class="el-icon-info"></i>
        如要使用此功能，请确保已开通手机短信接口
        <p style="padding-left: 18px">否则，该功能将无法使用。</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSwitch">取消</el-button>
        <el-button type="primary" @click="switchSetting">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="申请详情"
      :visible.sync="isDetails"
      class="details-content"
      width="40%"
    >
      <div class="card" v-for="(item, index) in detailData" :key="index">
        <p>{{ item.name }}</p>
        <div
          :class="
            item.name == '角色信息（教师）' ? 'card-teach' : 'card-stutend'
          "
        >
          <el-row v-for="(val, indx1) in item.contents" :key="indx1">
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                {{ val.title }}：
              </div></el-col
            >
            <el-col :span="19"
              ><div class="grid-content bg-purple-light">
                {{ val.content ? val.content : "-" }}
              </div></el-col
            >
          </el-row>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" v-if="tempData.status === 1">
        <el-button type="warning" @click="changeApply(tempData.id, 3)"
          >拒绝</el-button
        >
        <el-button type="primary" @click="changeApply(tempData.id, 2)"
          >通过</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import global from "../../../tools/global";

export default {
  data() {
    return {
      loading: {
        status: false,
        txt: "获取数据...",
      },
      applyData: [],
      applyParam: {
        keyword: "",
        status: 0,
        roleid: 0,
        page_index: 1,
        page_size: 10,
      },
      keyword: "",
      isShowButton: 0, // 根据状态显示批量删除/拒绝/通过按钮
      status: 0,
      total_number: 0,
      selected: [],
      statusOption: [
        {
          value: 0,
          label: "全部状态",
        },
        {
          value: 1,
          label: "未审核",
        },
        {
          value: 2,
          label: "已通过",
        },
        {
          value: 3,
          label: "已拒绝",
        },
      ],
      status_arr: { 0: "通过", 1: "拒绝", 2: "批量通过", 3: "批量拒绝" },
      fieldsTips: false,
      roleData: [
        {
          value: 0,
          label: "全部角色",
        },
        {
          value: 5,
          label: "家长",
        },
        {
          value: 6,
          label: "教师",
        },
        {
          value: 4,
          label: "学生",
        },
      ],
      isSetting: false,
      settingForm: {
        notice: null,
      },
      // =============================================================================================
      initNotice: null, // 审批结构通知初始值
      // =============================================================================================
      isDetails: false,
      detailData: [] /* 详情列表 */,
      tempData: [],
      rowLen: 0,
    };
  },
  created() {
    this.getList();

    // =============================================================================================
    this.getNotification(); // 获取审核结果通知
    // =============================================================================================
  },
  methods: {
    isRole(id, num) {
      let flag = false;
      let temp = id.split(",");

      temp.forEach((item) => {
        if (item == num) {
          flag = true;
        }
      });

      return flag;
    },
    rowDetail(obj) {
      this.detailData = [];
      this.tempData = deep_clone(obj);

      if (this.$store.state.checkLevel) {
        this.detailData.push({
          name: "基本信息",
          contents: [
            {
              title: "姓名",
              content: obj.name,
            },
            {
              title: "角色",
              content: obj.part,
            },
            {
              title: "性别",
              content: obj.sex === 1 ? "男" : "女",
            },
            {
              title: "登录帐号",
              content: obj.number,
            },
            {
              title: "注册时间",
              content: obj.create_time,
            },
          ],
        });
      } else {
        this.detailData.push({
          name: "基本信息",
          contents: [
            {
              title: "姓名",
              content: obj.name,
            },
            {
              title: "角色",
              content: obj.part,
            },
            {
              title: "性别",
              content: obj.sex === 1 ? "男" : "女",
            },
            {
              title: "登录帐号",
              content: obj.number,
            },
            {
              title: "注册时间",
              content: obj.create_time,
            },
          ],
        });
      }

      if (this.isRole(obj.role_id, 4) === true) {
        this.detailData.push({
          name: "角色信息（学生）",
          contents: [
            {
              title: "所在班级",
              content: obj.class ? obj.class[0].rename : "-",
            },
          ],
        });
      }

      if (this.isRole(obj.role_id, 6) === true && !is_empty(obj.class)) {
        let teacherInfo = [];

        obj.class.forEach((item) => {
          teacherInfo.push({
            title: "任教班级",
            content: item.rename,
          });
          teacherInfo.push({
            title: "任教学科",
            content: obj.subject_name,
          });
        });

        this.detailData.push({
          name: "角色信息（教师）",
          contents: teacherInfo,
        });
      }

      if (this.isRole(obj.role_id, 5) === true && !is_empty(obj.my_children)) {
        let childrenInfo = [];

        obj.my_children.forEach((item) => {
          childrenInfo.push({
            title: "子女帐号",
            content: item.number,
          });
          childrenInfo.push({
            title: "子女姓名",
            content: item.name,
          });
          childrenInfo.push({
            title: "子女班级",
            content: item.rename,
          });
        });

        this.detailData.push({
          name: "角色信息（家长）",
          contents: childrenInfo,
        });
      }

      this.detailData.push({
        name: "联系方式",
        contents: [
          {
            title: "手机",
            content: obj.telphone,
          },
        ],
      });

      this.isDetails = true;
    },
    cancelSwitch() {
      // =============================================================================================
      // this.settingForm.notice = '0';
      this.settingForm.notice = this.initNotice;
      // =============================================================================================
      this.isSetting = false;
    },
    // =============================================================================================
    switchSetting() {
      this.isSetting = false;

      let success = (data) => {
        this.initNotice = this.settingForm.notice;
        this.$message.success(data.msg);
      };

      let fail = (data) => {
        this.$message.error(data.msg);
      };

      let params = {
        flag: this.settingForm.notice,
        // create_id: global.user_id,
        // notice: this.settingForm.notice,
      };

      this.$ajax.put("api/system/change_user_apply_sms_config", params, {
        func: { success: success, fail: fail },
      });
    },
    // =============================================================================================
    deleteOne(id) {
      let success = (data) => {
        this.$message.success(data.msg);

        if (this.applyData.length - 1 === 0) {
          if (this.applyParam.page_index > 1) {
            this.applyParam.page_index--;
          } else {
            this.applyParam.page_index = 1;
          }
        }

        this.getList();
      };
      let yes = (data) => {
        this.$ajax.delete("api/user/del_user_apply", {
          params: { id },
          func: { success: success },
        });
      };
      let cancel = (data) => {};

      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定要删除该用户注册申请吗？",
      });
    },
    deleteApply(id) {
      let success = (data) => {
        this.$message.success(data.msg);

        if (this.applyData.length - this.rowLen === 0) {
          if (this.applyParam.page_index > 1) {
            this.applyParam.page_index--;
          } else {
            this.applyParam.page_index = 1;
          }
        }

        this.getList();
      };

      this.$ajax.delete("api/user/del_user_apply", {
        params: { id },
        func: { success: success },
      });
    },
    deleteAllApply(status) {
      if (this.selected.length === 0) {
        this.$message.warning("请选择要删除的项");
        return false;
      }
      let yes = (data) => {
        var ids = [];
        for (var i = this.selected.length - 1; i >= 0; i--) {
          ids.push(this.selected[i].id);
        }
        this.rowLen = this.selected.length;
        this.deleteApply(ids);
      };
      let cancel = (data) => {};

      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定要批量删除这些数据吗？该操作无法撤销",
      });
    },
    searchFunc() {
      this.applyParam.keyword = this.keyword;
      this.applyParam.status = this.status;
      this.applyParam.page_index = 1;
      this.isShowButton = this.status;
      this.getList();
    },
    reset() {
      this.keyword = "";
      this.status = 0;
      this.isShowButton = 0;
      this.applyParam = {
        keyword: "",
        status: 0,
        roleid: 0,
        page_index: 1,
        page_size: 10,
      };
      this.getList();
    },
    checkSelectable(row) {
      // =============================================================================================
      return true;
      // =============================================================================================
      if (this.isShowButton > 1) {
        return true;
      }

      return parseInt(row.status) === 1;
    },
    getList() {
      this.loading.status = true;
      let success = (data) => {
				this.loading.status = false;
				console.log(data.data.data, 'oopop')
        this.applyData = data.data.data;
        this.total_number = data.data.data_sum;

        if (this.applyParam.roleid == null) {
          this.applyParam.roleid = 0;
        }

        if (this.applyData.length > 0) {
          this.applyData.forEach((item) => {
            let part = "";
            let isFirst = true;

            item.role.forEach((val) => {
              if (isFirst) {
                isFirst = false;
                part += val.name;
              } else {
                part = part + "," + val.name;
              }
            });

            item.part = part;
          });
        }
      };
      let fail = (data) => {
        this.loading.status = false;
        this.$message.error(data.msg);
      };
      this.applyParam.roleid =
        this.applyParam.roleid == 0 ? null : this.applyParam.roleid;

      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/user/user_apply", {
        params: this.applyParam,
        func: { success: success, fail: fail },
      });
    },
    getNotification() {
      let success = (data) => {
        this.settingForm.notice = this.initNotice = data.data.flag;
      };
      let fail = (data) => {
        this.$message.error(data.msg);
      };

      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/system/user_apply_sms_config", {
        params: {},
        func: { success: success, fail: fail },
      });
    },
    handleSizeChange(val) {
      this.applyParam.page_index = 1;
      this.applyParam.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.applyParam.page_index = val;
      this.getList();
    },
    //选中
    tableSelectionChange(val) {
      this.selected = val;
    },
    changeApply_confirm(obj, status) {
      let yes = (data) => {
        this.detailData = false;
        this.changeApply(obj.id, status);
      };
      let cancel = (data) => {};
      let key = null;

      if (status === 2) {
        key = 0;
      } else if (status === 3) {
        key = 1;
      }

      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt:
          "确定" +
          this.status_arr[parseInt(key)] +
          " " +
          obj.number +
          " 的注册申请吗？",
      });
    },
    changeApply(id, status) {
      let success = (data) => {
        if (this.tempData.length != 0) {
          this.tempData = [];
          this.isDetails = false;
        }
        this.$message.success(data.msg);
        this.getList();
      };
      this.$ajax.put(
        "api/user/change_user_apply",
        { id: id, status: status },
        { func: { success: success } }
      );
    },
    changeMuiltApply_confirm(status) {
      if (this.selected.length === 0) {
        this.$message.warning("请选择要" + this.status_arr[status] + "的项");
        return false;
      }
      let yes = (data) => {
        this.muilChangeApply(status);
      };
      let cancel = (data) => {};
      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定要" + this.status_arr[status] + "这些申请吗？该操作无法撤销",
      });
    },
    muilChangeApply(status) {
      var ids = [];
      for (var i = this.selected.length - 1; i >= 0; i--) {
        ids.push(this.selected[i].id);
      }
      this.changeApply(ids, status);
    },
  },
};
</script>
<style lang="scss">
.zh-application-registration {
  .th-title-icon {
    position: absolute;
    top: 0;
    right: 40px;

    i {
      color: #daa017;
      font-size: 16px;
    }
  }

  .zh-common-title-text {
    li {
      color: #000 !important;
    }
  }

  .el-table__body-wrapper table tbody {
    td:nth-child(7) {
      padding: 0;
    }
  }

  .details-content {
    .card {
      p:first-child {
        border-left: 5px solid #4cc3c3;
        padding-left: 7px;
        text-align: left;
      }

      .el-row {
        padding-bottom: 10px;

        > div:first-child {
          text-align: right;
        }

        > div:last-child {
          padding-left: 25px;
          text-align: left;
        }
      }
    }

    .card:last-child {
      padding-bottom: 40px;
    }

    .card:not(:first-child):not(:last-child) .card-teach {
      .el-row:nth-child(2n):not(:last-child) {
        border-bottom: 1px dotted #ccc;
        margin-bottom: 20px;
      }
    }

    .card:not(:first-child):not(:last-child) .card-stutend {
      .el-row:nth-child(3n):not(:last-child) {
        border-bottom: 1px dotted #ccc;
        margin-bottom: 20px;
      }
    }
  }
}
</style>